<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:90px' }"
    :wrapper-col="{ style: 'calc(100% - 90px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="仓库类型" name="warehouseType" :rules="[{ required: true, message: '请选择仓库类型!' }]">
      <a-select v-model:value="formState.warehouseType" placeholder="请选择">
        <a-select-option v-for="item in dataDict['WAREHOUSE_TYPE']" :key="item.code" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="仓库属性" name="warehouseProperty" :rules="[{ required: false, message: '请选择仓库属性!' }]">
      <a-select v-model:value="formState.warehouseProperty" placeholder="请选择" allowClear>
        <a-select-option v-for="item in dataDict['WAREHOUSE_PROPERT']" :key="item.code" :value="item.name">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="国家或地区" name="countryId" :rules="[{ required: true, message: '请选择国家或地区!' }]">
      <a-select v-model:value="formState.countryId" placeholder="请选择">
        <a-select-option v-for="item in countryOpts" :key="item.id" :value="item.id">{{ item.region }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="仓库代码" name="warehouseCode" :rules="[{ required: true, message: '请填写仓库代码!' }]">
      <a-input v-model:value="formState.warehouseCode" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="城市" name="city" :rules="[{ required: true, message: '请填写城市!' }]">
      <a-input v-model:value="formState.city" :maxlength="40" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="州" name="state" :rules="[{ required: true, message: '请填写州!' }]">
      <a-input v-model:value="formState.state" :maxlength="40" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="邮编" name="zipCode" :rules="[{ required: true, message: '请填写邮编!' }]">
      <a-input v-model:value="formState.zipCode" @keyup="validateZhInputHandle($event, formState, ['zipCode'])" :maxlength="20" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="收件人" name="receiverName" :rules="[{ required: true, message: '请填写收件人!' }]">
      <a-input v-model:value="formState.receiverName" :maxlength="50" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="联系电话" name="receiverPhone" :rules="[{ required: true, message: '请填写联系电话!' }]">
      <a-input v-model:value="formState.receiverPhone" @keyup="validateZhInputHandle($event, formState, ['receiverPhone'])" :maxlength="20" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="公司" name="company" :rules="[{ required: false, message: '请填写公司!' }]">
      <a-input v-model:value="formState.company" :maxlength="50" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="地址一" name="address" :rules="[{ required: true, message: '请填写地址一!' }]">
      <a-textarea v-model:value="formState.address" show-count placeholder="请输入" :maxlength="200" />
    </a-form-item>
    <a-form-item label="地址二" name="addressTwo" :rules="[{ required: false, message: '请填写地址二!' }]">
      <a-textarea v-model:value="formState.addressTwo" show-count placeholder="请输入" :maxlength="200" />
    </a-form-item>
    <a-form-item label="地址三" name="addressThree" :rules="[{ required: false, message: '请填写地址三!' }]">
      <a-textarea v-model:value="formState.addressThree" show-count placeholder="请输入" :maxlength="200" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WarehouseCode.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { dataDict } = CommonHook();
const { formDataRef, formState, loading, countryOpts, getAllCountryOpts } = InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle, validateZhInputHandle } = OperationHook({ formDataRef, formState, passData, emit, type, loading });
const init = () => {
  if (type.value === 2) {
    Object.assign(formState, passData.value);
  }
  getAllCountryOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number){
    width: 100%;
}
</style>
